<template>
	<div class="personal layout-pd">
		<el-row>
			<!-- 个人信息 -->
			<el-col :xs="24" :sm="16">
				<el-carousel class="w100" height="222px" :interval="4000">
					<el-carousel-item v-for="item in 4" :key="item">
						<h3 class="small justify-center" text="2xl">{{ item }}</h3>
					</el-carousel-item>
				</el-carousel>

				<el-col :span="24">
					<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
						<div class="personal-edit-title">基本信息</div>
						<el-form :model="state.personalForm" size="default" label-width="40px" class="mt35 mb35">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
									<el-form-item label="昵称">
										<el-input v-model="state.personalForm.name" placeholder="请输入昵称" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
									<el-form-item label="邮箱">
										<el-input v-model="state.personalForm.email" placeholder="请输入邮箱" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
									<el-form-item label="签名">
										<el-input v-model="state.personalForm.autograph" placeholder="请输入签名" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
									<el-form-item label="职业">
										<el-select v-model="state.personalForm.occupation" placeholder="请选择职业" clearable class="w100">
											<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
											<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
											<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
									<el-form-item label="手机">
										<el-input v-model="state.personalForm.phone" placeholder="请输入手机" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
									<el-form-item label="性别">
										<el-select v-model="state.personalForm.sex" placeholder="请选择性别" clearable class="w100">
											<el-option label="男" value="1"></el-option>
											<el-option label="女" value="2"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item>
										<el-button type="primary">
											<el-icon>
												<ele-Position />
											</el-icon>
											更新个人信息
										</el-button>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<div class="personal-edit-title mb15">账号安全</div>
						<div class="personal-edit-safe-box">
							<div class="personal-edit-safe-item">
								<div class="personal-edit-safe-item-left">
									<div class="personal-edit-safe-item-left-label">账户密码</div>
									<div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
								</div>
								<div class="personal-edit-safe-item-right">
									<el-button text type="primary">立即修改</el-button>
								</div>
							</div>
						</div>
						<div class="personal-edit-safe-box">
							<div class="personal-edit-safe-item">
								<div class="personal-edit-safe-item-left">
									<div class="personal-edit-safe-item-left-label">密保手机</div>
									<div class="personal-edit-safe-item-left-value">已绑定手机：132****4108</div>
								</div>
								<div class="personal-edit-safe-item-right">
									<el-button text type="primary">立即修改</el-button>
								</div>
							</div>
						</div>
						<div class="personal-edit-safe-box">
							<div class="personal-edit-safe-item">
								<div class="personal-edit-safe-item-left">
									<div class="personal-edit-safe-item-left-label">密保问题</div>
									<div class="personal-edit-safe-item-left-value">已设置密保问题，账号安全大幅度提升</div>
								</div>
								<div class="personal-edit-safe-item-right">
									<el-button text type="primary">立即设置</el-button>
								</div>
							</div>
						</div>
						<div class="personal-edit-safe-box">
							<div class="personal-edit-safe-item">
								<div class="personal-edit-safe-item-left">
									<div class="personal-edit-safe-item-left-label">绑定QQ</div>
									<div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
								</div>
								<div class="personal-edit-safe-item-right">
									<el-button text type="primary">立即设置</el-button>
								</div>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-col>

			<!-- 站长推荐 -->
			<el-col :xs="24" :sm="8" class="pl15 personal-info">
				<el-row justify="center">
					<img class="personnal-avatar" src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=80&h=80" />
					<el-col :span="24" class="mb18 mt15 text">{{ currentTime }}，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
				</el-row>
				<el-col :span="24">
					<ul class="ul">
						<li v-for="(v, k) in state.categoryList" :key="k">
							<a href="#">
								<h2>{{ v.title }}</h2>
							</a>
						</li>
					</ul>
				</el-col>
				<el-card class="mt15" shadow="hover">
					<template #header>
						<span>站长推荐</span>
						<span class="personal-info-more">更多</span>
					</template>
					<div class="personal-info-box">
						<ul class="personal-info-ul">
							<li v-for="(v, k) in state.newsInfoList" :key="k" class="personal-info-li">
								<a :href="v.link" target="_block" class="personal-info-li-title">{{ v.title }}</a>
							</li>
						</ul>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="home">
import { reactive, computed } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import { newsInfoList, recommendList, categoryList } from './mock';

// 定义变量内容
const state = reactive<HomeState>({
	categoryList,
	newsInfoList,
	recommendList,
	personalForm: {
		name: '',
		email: '',
		autograph: '',
		occupation: '',
		phone: '',
		sex: '',
	},
});

// 当前时间提示语
const currentTime = computed(() => {
	return formatAxis(new Date());
});
</script>

<style scoped lang="scss">
@import '../../theme/mixins/index.scss';

.demonstration {
	color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
	color: #475669;
	opacity: 0.75;
	line-height: 220px;
	margin: 0;
	text-align: center;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}

.ul,
li {
	list-style: none;
}
.ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.ul li a {
	text-decoration: none;
	color: #000;
	background: #ffc;
	display: block;
	padding: 1em;
	box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
	transform: rotate(-6deg);
	transition: transform 0.15s linear;
}

.ul li:nth-child(even) a {
	transform: rotate(4deg);
	position: relative;
	top: 5px;
	background: #cfc;
}
.ul li:nth-child(3n) a {
	transform: rotate(-3deg);
	position: relative;
	top: -5px;
	background: #ccf;
}
.ul li:nth-child(5n) a {
	transform: rotate(5deg);
	position: relative;
	top: -10px;
}

.ul li a:hover,
.ul li a:focus {
	box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.7);
	transform: scale(1.25);
	position: relative;
	z-index: 5;
}

.ul li {
	margin: 1em;
}


.text {
 letter-spacing: 0.2rem;
 font-size: 1.5rem;
 background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-background-size: 200% 100%;
 -webkit-animation: maskedAnimation 4s infinite linear;
}



@keyframes maskedAnimation {
 0% {
  background-position: 0 0;
 }

 100% {
  background-position: -100% 0;
 }
}



.personal {
	.personal-user {
		height: 130px;
		display: flex;
		align-items: center;
	}
	.personnal-avatar {
		width: 40%;
		border-radius: 50%;
	}
	.personal-info {
		.personal-info-more {
			float: right;
			color: var(--el-text-color-secondary);
			font-size: 13px;
			&:hover {
				color: var(--el-color-primary);
				cursor: pointer;
			}
		}
		.personal-info-box {
			height: 130px;
			overflow: hidden;
			.personal-info-ul {
				list-style: none;
				.personal-info-li {
					font-size: 13px;
					padding-bottom: 10px;
					.personal-info-li-title {
						display: inline-block;
						@include text-ellipsis(1);
						color: var(--el-text-color-secondary);
						text-decoration: none;
					}
					& a:hover {
						color: var(--el-color-primary);
						cursor: pointer;
					}
				}
			}
		}
	}
	.personal-recommend-row {
		.personal-recommend-col {
			.personal-recommend {
				position: relative;
				height: 100px;
				border-radius: 3px;
				overflow: hidden;
				cursor: pointer;
				&:hover {
					i {
						right: 0px !important;
						bottom: 0px !important;
						transition: all ease 0.3s;
					}
				}
				i {
					position: absolute;
					right: -10px;
					bottom: -10px;
					font-size: 70px;
					transform: rotate(-30deg);
					transition: all ease 0.3s;
				}
				.personal-recommend-auto {
					padding: 15px;
					position: absolute;
					left: 0;
					top: 5%;
					color: var(--next-color-white);
					.personal-recommend-msg {
						font-size: 12px;
						margin-top: 10px;
					}
				}
			}
		}
	}
	.personal-edit {
		.personal-edit-title {
			position: relative;
			padding-left: 10px;
			color: var(--el-text-color-regular);
			&::after {
				content: '';
				width: 2px;
				height: 10px;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: var(--el-color-primary);
			}
		}
		.personal-edit-safe-box {
			border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
			padding: 15px 0;
			.personal-edit-safe-item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.personal-edit-safe-item-left {
					flex: 1;
					overflow: hidden;
					.personal-edit-safe-item-left-label {
						color: var(--el-text-color-regular);
						margin-bottom: 5px;
					}
					.personal-edit-safe-item-left-value {
						color: var(--el-text-color-secondary);
						@include text-ellipsis(1);
						margin-right: 15px;
					}
				}
			}
			&:last-of-type {
				padding-bottom: 0;
				border-bottom: none;
			}
		}
	}
}
</style>
